<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<title>公众号支付</title>
<style type="text/css">
html,body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript">
    /**
     * 生成订单
     */
    generateOrderId = function() {
        var date = new Date();
        var tmp = null;
        var str = [];
        str.push(date.getFullYear());

        tmp = date.getMonth();
        str.push(tmp < 10 ? "0" + tmp : tmp);

        tmp = date.getDate();
        str.push(tmp < 10 ? "0" + tmp : tmp);

        tmp = date.getHours();
        str.push(tmp < 10 ? "0" + tmp : tmp);

        tmp = date.getMinutes();
        str.push(tmp < 10 ? "0" + tmp : tmp);

        tmp = date.getSeconds();
        str.push(tmp < 10 ? "0" + tmp : tmp);

        str.push(date.getTime());
        str.push(date.getMilliseconds());

        return str.join("");
    }

    function getCookie(name) {
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg)) {
            return unescape(arr[2]);
        } else {
            return null;
        }
    }

    /**
     * 获取openid
     **/
    getOpenId = function() {
        //.QPFishInfo
        var openId = null;
        var value = getCookie("QPFishInfo");
        if (value != null) {
            var userInfo = JSON.parse(value);
            if (userInfo != null) {
                openId = userInfo.openid;
            }
        }
        if (openId == null || openId.trim() == "") {
            openId = "ok0B31gHRapVyP9RJMwtsGxPpMjk";
        }
        return openId;
    }

    /**
     * 更新订单
     */
    updateOrder = function() {
        orderId = generateOrderId();
        $("#order_id").text(orderId);
    }

    /**
     * 发起支付
     */
    function payItem() {
        var sdk = window.JYPAY;
        var order = {
            "body" : $("#body").text(),
            "total_fee" : $("#total_fee").text(),
            "order_id" : $("#order_id").text(),
            "open_id" : $("#open_id").text()
        };
        sdk.pay(order, function(success, desc) {
            updateOrder();
            var str = success ? "支付成功" : "支付失败";
            if (!success) {
                str += "\n\n" + desc
            }
            alert(str);
        });
    }
</script>
<script type="text/javascript">
    function loadQFishGame() {
        loadGame("http://fish-h5.9you-nj.cn/QPFish/index.html", 90);
    }
    function buttonClick() {
        /*
        var str = "根据《中华人民共和国刑法》第357条规定，毒品是指鸦片、海洛因、甲基苯丙胺（冰毒）、吗啡、大麻、可卡因以及国家规定管制的其他能够使人形成瘾癖的麻醉药品和精神药品。《麻醉药品及精神药品品种目录》中列明了121种麻醉药品和130种精神药品。毒品通常分为麻醉药品和精神药品两大类。其中最常见的主要是麻醉药品类中的大麻类、鸦片类和可卡因类。";
        dlgView.showOkCancelDialog("支付成功", str, function() {
            console.log("确定按钮被按下");
        }, function() {
            console.log("取消按钮被按下");
        });
        */
    var data = [ {
            title : "微信支付",
            desc : "使用微信客户端支付"
        }, {
            title : "支付宝支付",
            desc : "使用支付宝客户端支付"
        }, {
            title : "威富通支付",
            desc : "使用威富通支付"
        }, {
            title : "聚宝云支付",
            desc : "使用聚宝云支付"
        }, {
            title : "神州付支付",
            desc : "使用神州付支付"
        }, {
            title : "易宝支付",
            desc : "使用易宝支付"
        } ]
        dlgView.showList("支付选择", data, function(i, item) {
            dlgView.showOkDialog("信息", JSON.stringify(item));
        });
    }
    function OnMessage(e) {
        var data = e.data || {};
        var order = {
            "body" : data.goodsName,
            "total_fee" : data.amount * 100,
            "order_id" : generateOrderId(),
            "open_id" : data.openId
        };
        var sdk = window.JYPAY;
        sdk.pay(order, function(result, desc) {
            updateOrder();
            var str = null;
            if (result == PayResult.SUCCESS) {
                str = "支付成功";
            } else if (result == PayResult.FAILURE) {
                str = "支付失败";
            } else {
                str = "支付取消";
            }
            str += "\n\n" + desc;
            alert(str);
        });
    }
    // 添加自定义消息
    if (window.addEventListener) { // all browsers except IE before version 9
        window.addEventListener("message", OnMessage, false);
    } else {
        if (window.attachEvent) { // IE before version 9
            window.attachEvent("onmessage", OnMessage);
        }
    }
</script>

<script type="text/javascript">
    var openId = null;
    var bodyStr = null;
    var totalFee = null;
    var orderId = null;

    $(document).ready(function() {
        openId = getOpenId();
        bodyStr = "腾讯充值中心-QQ会员充值";
        totalFee = "1";
        orderId = generateOrderId();
        $("#body").text(bodyStr);
        $("#total_fee").text(totalFee);
        $("#order_id").text(orderId);
        $("#open_id").text(openId);
    });
    function closeWindow() {
        //window.location.href="about:blank";
        //window.close();
    }
</script>
<script type="text/javascript">
    function Progress() {
        var progress = {};
        var size = 80;
        progress.show = function() {
            var $maskView = $("<div/>");
            $maskView.css({
                "width" : "100%",
                "height" : "100%",
                "position" : "fixed",
                "left" : "0",
                "top" : "0",
                "right" : "0",
                "bottom" : "0",
                "margin" : "0",
                "padding" : "0"
            });
            var $layout = $("<div/>");
            $layout.css({
                "width" : size + "px",
                "height" : size + "px",
                "line-height" : size + "px",
                "text-align" : "center",
                "position" : "absolute",
                "top" : "50%",
                "left" : "50%",
                "z-index" : "2",
                "border-radius" : "5px",
                "transform" : "translate(-50%, -50%)",
                "background" : "rgba(0, 0, 0, 0.8)"
            });
            var $progressBar = $("<div/>");
            $progressBar.css({
                "width" : size / 2 + "px",
                "height" : size / 2 + "px",
                "display" : "inline-block",
                "position" : "relative",
                "margin-top" : size / 4 - 2 + "px",
                "background" : "rgba(0, 0, 0, 0)",
                "border-radius" : size / 2 + "px",
                "border-top" : "2px solid white",
                "border-right" : "2px solid gray",
                "border-bottom" : "2px solid gray",
                "border-left" : "2px solid gray",
                "background" : "rgba(0, 0, 0, 0)",
            });
            $layout.append($progressBar);
            $maskView.append($layout);
            $(body).append($maskView);
            var degree = 0;
            var intervalId = setInterval(function() {
                degree += 10;
                if (degree > 360) {
                    degree = 0;
                }
                $progressBar.css("transform", "rotate(" + degree + "deg)");
            }, 1000 / 60);

            progress.intervalId = intervalId;
            progress.view = $maskView;
            $maskView.click(function() {
                progress.close();
            });
        };
        progress.close = function() {
            progress.view.remove();
            clearInterval(progress.intervalId);
        }
        return progress;
    }
    function showProgress() {
        var progress = Progress().show();
    }
</script>
<script type="text/javascript">
    function alipay() {
        var gameURL = "http://10.0.0.201:8080/wxpay/alipay/alipay.jsp";
        $("body")
        .append(
                '<div id="gameFrameDiv" style="width: 100%; height: 50%; '
                        + ' position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%);">'
                        + '<iframe id="gameFrame" name="gameFrame" src="'
                        + gameURL
                        + '" frameborder="no" '
                        + 'border="0px" marginwidth="0px" marginheight="0px" '
                        + 'scrolling="auto" style="width: 100%; height: 100%;">'
                        + '</iframe>' + '</div>');
    }
</script>
</head>
<body style="text-align: center">
    <table align=center cellspacing="10">
        <tr>
            <td style="text-align: left"><nobr>商品描述&nbsp;:&nbsp;</nobr></td>
            <td style="text-align: left"><span id="body"
                style="word-break: break-all"></span></td>
        </tr>
        <tr>
            <td style="text-align: left"><nobr>支付金额&nbsp;:&nbsp;</nobr></td>
            <td style="text-align: left"><span id="total_fee"
                style="word-break: break-all"></span>分</td>
        </tr>
        <tr>
            <td style="text-align: left"><nobr>商户订单&nbsp;:&nbsp;</nobr></td>
            <td style="text-align: left"><span id="order_id"
                style="word-break: break-all"></span></td>
        </tr>
        <tr>
            <td style="text-align: left"><nobr>用户标示&nbsp;:&nbsp;</nobr></td>
            <td style="text-align: left"><span id="open_id"
                style="word-break: break-all"></span></td>
        </tr>
    </table>
    <br />
    <br />
    <br />
    <button style="height: 2.5em;" onclick="payItem();">当前页面支付</button>
    <br />
    <button style="height: 2.5em;" onclick="loadQFishGame();">进入游戏</button>
    <br />
    <button style="height: 2.5em;" onclick="buttonClick();">对话框按钮</button>
    <br />
    <button style="height: 2.5em;" onclick="floatPay.showOrder();">订单按钮</button>
    <br />
    <button style="height: 2.5em;" onclick="showProgress();">进度条</button>
    <br />
    <button style="height: 2.5em;" onclick="floatPay.payInFrame('http://10.0.0.201:8080/wxpay/alipay/alipay.jsp');">支付宝支付</button>
    <!-- <script src="floatpay.js"></script> -->
    <script src="jypay.js"></script>
</body>
</html>